<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>执行流程</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../lib/bpmn-js/dist/assets/diagram-js.css">
  <link rel="stylesheet" href="../lib/bpmn-js/dist/assets/bpmn-font/css/bpmn.css">
  <link rel="stylesheet" href="../lib/mdui/css/mdui.min.css" type="text/css">
  <style>
    .form-edit {
      position: fixed;
      right: 6px;
      width: 280px;
      height: 600px;
      top: 60px;
    }
    .task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
      stroke: #009933 !important;
    }
    .cur-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
      stroke: #ffd740 !important
    }
    .line-highlight .djs-visual > :nth-child(1) {
      stroke: #009933 !important;
    }
  </style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
<div class="mdui-toolbar mdui-color-theme">
  <a href="../index.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">arrow_back</i></a>
  <span class="mdui-typo-title">执行流程</span>
  <div class="mdui-toolbar-spacer"></div>
</div>
<div id="js-canvas" style="height: calc(100% - 64px);"></div>

<div class="mdui-card form-edit">
  <!-- 卡片的标题和副标题 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">填写表单</div>
  </div>
  <!-- 卡片的内容 -->
  <div class="mdui-card-content">
      <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">流程ID</label>
        <input name="workflowId" class="mdui-textfield-input" type="text" required/>
        <div class="mdui-textfield-error">流程ID不能为空</div>
      </div>
      <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">用户名</label>
        <input name="userName" class="mdui-textfield-input" type="text" required/>
        <div class="mdui-textfield-error">用户名不能为空</div>
      </div>
      <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">用户等级</label>
        <input id="level" name="level" class="mdui-textfield-input" type="number" required/>
        <div class="mdui-textfield-error">用户等级不能为空</div>
      </div>
      <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">总金额</label>
        <input id="cashAmount" name="cashAmount" class="mdui-textfield-input" type="number" required/>
        <div class="mdui-textfield-error">总金额不能为空</div>
      </div>
      <div class="mdui-card-actions">
        <button id="submit-btn" class="mdui-btn mdui-btn-raised mdui-ripple" onclick="submit()">
            提交
        </button>
      </div>
  </div>

</div>
<script src="../lib/bpmn-js/dist/bpmn-viewer.development.js"></script>
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/mdui/js/mdui.min.js"></script>
<script>
  var viewer = new BpmnJS({
    container: $('#js-canvas'),
    height: 800
  });

  var canvas = viewer.get('canvas');
  var elementRegistry = viewer.get('elementRegistry');
  var curElements = [];

  function openFromUrl(url) {
    $.ajax(url, { dataType : 'text' }).done(function(xml) {
      viewer.importXML(xml, function(err) {
        if (err) {
          console.log('error: ' + err.message);
          console.error(err);
        } else {
          viewer.get('canvas').zoom('fit-viewport');
          setColor(getColorNodes());
        }
      });
    });
  }

  function setColorActivity(bpmnInfos, curElenentId) {
      for (var i = 0; i < bpmnInfos.length; i++) {
          if (bpmnInfos[i].id === curElenentId) {
              return;
          }
      }

      var type = elementRegistry.get(curElenentId).type;
      if (type === 'bpmn:ExclusiveGateway' || type === "bpmn:ParallelGateway") {
          canvas.addMarker(curElenentId, 'task-highlight');
      } else {
          curElements.push(curElenentId);
          canvas.addMarker(curElenentId, 'cur-task-highlight');
      }
  }

  function setColor(bpmnInfos) {
      if (bpmnInfos && bpmnInfos.length > 0) {
          var curElenent;
          for (var i = 0; i < bpmnInfos.length; i++) {
              curElenent = elementRegistry.get(bpmnInfos[i].id);
              if (curElenent.type === 'bpmn:SequenceFlow') {
                  setColorActivity(bpmnInfos, curElenent.businessObject.targetRef.id);
              }
              if (bpmnInfos[i].line) {
                  canvas.addMarker((bpmnInfos[i].id), 'line-highlight');
              } else if (bpmnInfos[i].act) {
                  canvas.addMarker((bpmnInfos[i].id), 'cur-task-highlight');
              } else {
                  canvas.addMarker(bpmnInfos[i].id, 'task-highlight');
              }
          }
      }
  }

  var nodeIds = [];
  var lineIds = [];
  var curNodeIds = [];
  var lineSet = new Set();
  var nodeSet = new Set();
  function getColorNodes() {
      curElements = [];
      var colorNodes = [];
      for (var i = 0; i < nodeIds.length; i++) {
          nodeSet.add(nodeIds[i]);
      }
      for (var i = 0; i < lineIds.length; i++) {
          lineSet.add(lineIds[i]);
      }
      for (var i = 0; i < curNodeIds.length; i++) {
          if (elementRegistry.get(curNodeIds[i]).type === "bpmn:SubProcess") {
            continue;
          }
          lineSet.add(curNodeIds[i]);
          curElements.push(curNodeIds[i]);
          colorNodes.push({id: curNodeIds[i], line: false, act: true});
      }

      nodeSet.forEach(function (element, sameElement, set) {
          colorNodes.push({id: element, line: false, act: false});
      });
      lineSet.forEach(function (element, sameElement, set) {
          colorNodes.push({id: element, line: true, act: false});
      });

      return colorNodes;
  }
  function getVariable() {
      var vr = {level: document.getElementById('level').value, cashAmount: document.getElementById('cashAmount').value};
      return JSON.stringify(vr);
  }
  function getNodeIds() {
     /*
          if (curElements.length > 1) {
              nodeIds = nodeIds.concat(curElements[0]);
          } else {
              nodeIds = nodeIds.concat(curElements);
          }
      */

      nodeIds = nodeIds.concat(curElements);

      var se = new Set(nodeIds);
      return Array.from(se);
  }
  function submit() {
      var body = {variableStr: getVariable(), nodeIds: getNodeIds()};
      $("#submit-btn").attr("disabled", "disabled");
      $.ajax({
          type : "POST", //提交方式
          url : "http://localhost:55613/api/Task",//路径
          data : body,//数据，这里使用的是Json格式进行传输
          success : function(data) {//返回数据根据结果进行相应的处理
              console.log(data);
              if (data) {
                  nodeIds = data['activityIds'];
                  lineIds = data['lineIds'];
                  curNodeIds = data['curNodeIds'];
                  openFromUrl('../assets/1004.bpmn');
              }
          },
          complete: function () {
              $("#submit-btn").removeAttr("disabled");
          }
      });
  }
  /*
  line = false; // 是否是流程线
  id: string; // 节点ID
  assignees: string[] = []; // 审批人
  startTime: string; // 任务节点开始时间
  endTime: string; // 任务节点结束时间
  act = false; // 是否是当前节点
  * */
</script>
</body>
</html>

